<template>
  <page-body>
    <view class="page">

      <cover-view class="flex benben-position-layout flex flex-wrap align-center content_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <cover-view class='flex flex-wrap align-center justify-between flex-sub content_fd0_0'>
          <cover-view class='flex flex-wrap align-center content_fd0_0_c0'>
            <!-- <cover-view  class='fu-iconfont2  courseIns_fd0_0_c0_c0'></cover-view > -->
            <cover-image style="width: 20rpx;height: 30rpx;"   @tap.stop="handleJumpDiy" data-type="back"
            data-url="1" :src="benbenImageSrcResolution('black1.png', 'global')"></cover-image>
          </cover-view>
          <cover-view class='flex flex-wrap align-stretch justify-center'>
            <cover-view class='content_fd0_0_c1_c0'>详情</cover-view>
          </cover-view>
          <cover-view class='flex flex-wrap align-center justify-end content_fd0_0_c0'></cover-view>
        </cover-view>

      </cover-view>


      <!-- <view class="flex benben-position-layout flex flex-wrap align-center content_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub content_fd0_0'>
          <view class='flex flex-wrap align-center content_fd0_0_c0' @tap.stop="nav" data-type="back" data-url="1">
            <text class='fu-iconfont2  content_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='content_fd0_0_c1_c0'>详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end content_fd0_0_c0'>
          </view>
        </view>
      </view> -->


      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <!-- @ended="videoEnd" -->
        <video v-if="xcxzt==0" id="myVideo" class='flex  content_fd1_0' :src='list.file[0].path' x5-video-player-type="h5"
          @pause="throttle(videoEnd,2000) " :enable-progress-gesture='false' :show-center-play-btn="true"
          object-fit="fill" @timeupdate="getTimeFunc($event)" :initial-time="list.time*1"></video>
        <view class='flex flex-wrap align-center content_fd1_1'>
          <view class='flex flex-wrap align-center content_fd1_1_c0'>
            <text class='content_fd1_1_c0_c0'>内容简介</text>
          </view>
          <jyf-parser class='content_fd1_1_c1' v-if="list.content" :html="list.content | richTextFormat">
          </jyf-parser>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  let throttleTimer, throttleFlag;
  export default {
    components: {},


    data() {
      return {
        "list": {
          "aid": "",
          "file": [],
          "content": "",
          "create_time": "",
          "time": ""
        },
        "aid": "",
        "time": "",
        video_real_time: "",
		getzt:0,
		xcxzt:1,
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      this.getng49a38efad9e0Func()
    },
    onUnload() {
      // this.throttle(this.videoEnd(), 2000)
      this.videoContext && this.videoContext.stop();
    },
    onReady() {
    this.videoContext = uni.createVideoContext('myVideo', this);
    },
    onShow() {
			this.getzt()
    },
    onHide() {
    this.videoContext && this.videoContext.stop();
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
			async getzt(){
				let info = await this.$api.get(global.apiUrls.post64534cbb2c352, {
					code: 'app_grounding_status'
				});
				console.log(info.data.data)
				// console.log(this)
				this.xcxzt=info.data.data
				// #ifndef MP-WEIXIN
				this.xcxzt=0
				//  #endif
				// this.xcxzt=0
			},
      throttle(func, wait = 500, immediate = true) {

        if (immediate) {
          if (!throttleFlag) {
            throttleFlag = true;
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func();
            throttleTimer = setTimeout(() => {
              throttleFlag = false;
            }, wait);
          }
        } else {
          if (!throttleFlag) {
            throttleFlag = true
            // 如果是非立即执行，则在wait毫秒内的结束处执行
            throttleTimer = setTimeout(() => {
              throttleFlag = false
              typeof func === 'function' && func();
            }, wait);
          }
        }
      },
      // timeUpdate: function(e) {
      // 			var isReady = 1; // 是否开启可以视频快进 1 禁止开启
      // 			//跳转到指定播放位置 initial-time 时间为秒
      // 			let that = this;
      // 			//播放的总时长
      // 			var duration = e.detail.duration;
      // 			//实时播放进度 秒数
      // 			var currentTime = parseInt(e.detail.currentTime);
      // 			//当前视频进度
      // 			// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
      // 			if (that.video_real_time == 0) {
      // 				var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
      // 			} else {
      // 				var jump_time = parseInt(that.video_real_time);
      // 			}
      // 			if (isReady == 1) {
      // 				if (currentTime > jump_time && currentTime - jump_time > 3) {
      // 					let videoContext = wx.createVideoContext('myVideo');
      // 					videoContext.seek(that.video_real_time);
      // 					wx.showToast({
      // 						title: '未完整看完该视频，不能快进',
      // 						icon: 'none',
      // 						duration: 2000
      // 					});
      // 				}
      // 			}
      // 			that.video_real_time = currentTime; //实时播放进度
      // 		},



      nav() {
        // this.videoEnd()
        this.throttle(this.videoEnd(), 2000)
        uni.navigateBack(1)
      },
      //获取时间
      getTimeFunc(e) {
        // var currentTime = parseInt(e.detail.currentTime);
        // this.time = Math.floor(e.detail.currentTime);
        var isReady = 1; // 是否开启可以视频快进 1 禁止开启
        //跳转到指定播放位置 initial-time 时间为秒
        let that = this;
        //播放的总时长
        var duration = e.detail.duration;
        //实时播放进度 秒数
        var currentTime = parseInt(e.detail.currentTime);
        //当前视频进度
        // console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
        if (that.time == 0) {
          var jump_time = parseInt(that.video_real_time) + parseInt(that.time);
        } else {
          var jump_time = parseInt(that.time);
        }
        if (isReady == 1) {
          if (currentTime > jump_time && currentTime - jump_time > 3) {
            let videoContext = uni.createVideoContext('myVideo');
            videoContext.seek(that.time);
            currentTime = this.time;
            uni.showToast({
              title: '未完整看完该视频，不能快进',
              icon: 'none',
              duration: 2000
            });
          }
        }
        that.time = currentTime; //实时播放进度
        // console.log(val)

        // console.log("获取到的数据=>", this.time)

      },
      videoEnd() {
        this.gettf49a368d75e14Func()

      },
      //添加观看时长
      async gettf49a368d75e14Func() {
        //请求方法
        //数据验证

        let data649a368d75e14 = await this.$api.post(global.apiUrls.post649a368d75e14, {
          means_id: this.aid,
          time: this.time
        });

        console.log("data649a368d75e14=>", data649a368d75e14)
        if (data649a368d75e14.data.code != 1) {
          this.$message.info(data649a368d75e14.data.msg);
          return
        }
        // debugger
        this.addRecord()
        console.log("2222222222222222222222=>", data649a368d75e14)
        let info649a368d75e14 = data649a368d75e14.data;
      },

      /* 添加学习记录*/
      async addRecord() {
        let data64910ea324123 = await this.$api.post(global.apiUrls.post64910ea324123, {
          means_id: this.aid,
          demand: this.time
        })
        console.log("触发了=>", data64910ea324123)
        if (data64910ea324123.data.code != 1) {
          this.$message.info(data64910ea324123.data.msg);
          return
        }
      },
      //查询课程资料详情
      async getng49a38efad9e0Func() {
        //请求方法
        //数据验证

        let datalist = await this.$api.get(global.apiUrls.post649a38efad9e0, {
          aid: this.aid
        });

        if (datalist.data.code != 1) {
          this.$message.info(datalist.data.msg);
          return
        }
        let infolist = datalist.data;
        this.list = infolist.data
        console.log("list=>", this.list.file[0].path)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F6F6F6;
    background-size: 100% auto;
  }

  .content_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 148rpx;
    overflow: hidden;
    z-index: 10;
    position: fixed;
    top: -60rpx;
    background-size: 100% auto !important;
  }

  .content_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .content_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .content_fd0_0_c0 {
    width: 120rpx;
  }

  .content_fd0_0 {
    padding: 45rpx 32rpx 0rpx 32rpx;
  }

  ::v-deep .content_fd1_1_c1 {
    width: 100%;
    padding: 26rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .content_fd1_1_c0_c0 {
    font-size: 38rpx;
    font-weight: 500;
    color: #333;
    line-height: 50rpx;
  }

  .content_fd1_1_c0 {
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .content_fd1_1 {
    margin: 25rpx 0rpx 0rpx 0rpx;
    width: 100%;
    padding: 0rpx 25rpx 25rpx 25rpx;
  }

  .content_fd1_0 {
    width: 750rpx;
    height: 500rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }
</style>
